<template>
  <div class="wft-dynamic-comp-advanced-form">
    <el-form :ref="attrs.ref" :label-width="attrs.labelWidth" :label-align="attrs.labelAlign">
      <el-row>
        <el-col :span="24" v-for="comp in curComp.children" :key="comp.id">
          <el-form-item :label="`${getAttrs(comp.attrs).label}：`" :rules="[{ required: getAttrs(comp.attrs).required, message: '', trigger: 'blur' }]">
            <component :is="`${comp.key}Temp`" :cur-comp="comp" :panel-json="panelJson" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { useAttrs } from 'generator/hooks'
import { compDefault, panelJsonDefault } from 'generator/index/Layout/ConfigPanel/widget/default'
import { getAttrs } from 'generator/utils'

const props = withDefaults(defineProps<{
  panelJson: TPanel,
  curComp?: TComp
}>(), {
  panelJson: () => panelJsonDefault,
  curComp: () => compDefault
})

const attrs = useAttrs(props.curComp.attrs)
</script>
<style scoped>
.wft-dynamic-comp-advanced-form {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
